<!DOCTYPE html>
<html>
{include file='public/header'}
<style>
    .layui-table th {
        text-align: center;
    }

    .layui-table td {
        text-align: center;
    }

    .layui-input-block {
        margin-left: 75px;
    }
    .operas {
        display: flex;
        align-items: center;
    }

    .operas > a {
        padding: 5px;
        margin: 0 5px;
        font-size: 13px;
        cursor: pointer;
    }

    .operas > a:hover {
        color: #03a9f4;
    }

    .operas-active {
        background: azure;
        color: #03a9f4;
        border: 1px solid #03a9f4;
        border-radius: 8px;
    }
</style>
<body>
<div class="x-nav">
        <span class="layui-breadcrumb">
            <a href="">首页</a>
            <a href="">我的管理</a>
            <a><cite>我的列表</cite></a>
        </span>
    <a class="layui-btn layui-btn-small" id="reload" title="刷新">
        <i class="layui-icon" style="line-height:30px"><i class="iconfont">&#xe6aa;</i></i>
    </a>
</div>
<div class="x-body">
    <div class="layui-row">
<!--        <form class="layui-form">-->
<!--            <div class="layui-inline">-->
<!--                <label class="layui-form-label w-auto">文件名称：</label>-->
<!--                <div class="layui-input-inline">-->
<!--                    <input type="text" name="drama_name" placeholder="请输入文件名称" autocomplete="off" class="layui-input">-->
<!--                </div>-->
<!--            </div>-->
<!--            <button class="layui-btn" style="margin-left: 10px;" lay-submit lay-filter="searchList">搜索</button>-->
<!--        </form>-->
        <form class="layui-form">
            <div class="layui-inline" style="display: flex;align-items: center">
                <label class="layui-form-label w-auto">剧目：</label>
                <div class="layui-input-inline operas">
                    {volist name="dramalist" id="vo"}
                    <a href="/admin/my/index?drama_id={$vo.id}" {if $drama_id == $vo.id}class="operas-active"{/if}>{$vo.name}</a>
                    {/volist}
                </div>
            </div>
            <div class="layui-inline" style="display: flex;align-items: center">
                <label class="layui-form-label w-auto">分类：</label>
                <div class="layui-input-inline operas">
                    {volist name="typelist" id="vo"}
                    <a href="/admin/my/index?type={$vo.id}&drama_id={$drama_id}" {if $type_id == $vo.id}class="operas-active"{/if}>{$vo.name}</a>
                    {/volist}
                </div>
            </div>
        </form>
    </div>
    <div class="layui-col-md22" style="margin-top: 15px">
        <div class="layui-card">
            <div class="layui-card-body">
                <div class="layui-carousel x-admin-carousel x-admin-backlog"
                     style="width: 100%;max-height: 450px;overflow-x: hidden;overflow-y: auto">
                    <ul class="layui-row layui-col-space10 layui-this">
                        {volist name="data" id="vo"}
                        <li class="layui-col-md1 layui-col-xs3 layui-col-sm6">
                            <a href="/admin/videoDetail/index?custom_id={$vo.id}&type={$type_id}&drama_id={$drama_id}&mode=my" class="x-admin-backlog-body">
                                <img src="https://www.kswenxue.com/upload/image/I7605IyWrQU844b6907b55ee9be8746622d088d62876.png"
                                     alt="" style="width: 100%;height: 100%">
                                <div style="text-align: center">{$vo.name}</div>
                            </a>
                        </li>
                        {/volist}
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    layui.use(['table', "form", "layer"], function () {
        let form = layui.form;
        form.on('submit(searchList)', function (data) {
            search(data.field.drama_name);
        });
        form.on('submit(dramaList)', function (data) {
            search(data.field.drama_name);
        });
    });
    layui.use(["form", "util"], function () {
        var util = layui.util;
        util.on('lay-on', {
            "drama": (data) => {
                for (let v of data.siblings()) {
                    v.classList.remove("operas-active");
                }
                data.attr('class', "operas-active");
                search(data[0].innerHTML);
            },
        });
    });
    function search(drama_name) {
        $.ajax({
            url: '/admin/my/index',
            dataType: "json",
            data: {"drama_name": drama_name},
            success: function (result) {
            },
            error: function (error) {
            }
        });
    }
</script>
</body>
</html>